<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram 7-47</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="circuitCanvas" width="400" height="350"></canvas>

<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';

// --- Draw Wires and Components ---
ctx.beginPath();

// Terminal A wire
ctx.moveTo(70, 50);
ctx.lineTo(150, 50);

// Top horizontal wire connecting C1 and C2
ctx.moveTo(150, 50);
ctx.lineTo(300, 50);

// --- Capacitor C1 ---
// Top connecting wire
ctx.moveTo(150, 50);
ctx.lineTo(150, 90);
// Plates
ctx.moveTo(125, 90);
ctx.lineTo(175, 90);
ctx.moveTo(125, 110);
ctx.lineTo(175, 110);
// Bottom connecting wire
ctx.moveTo(150, 110);
ctx.lineTo(150, 170);

// --- Capacitor C2 ---
// Top connecting wire
ctx.moveTo(300, 50);
ctx.lineTo(300, 90);
// Plates
ctx.moveTo(275, 90);
ctx.lineTo(325, 90);
ctx.moveTo(275, 110);
ctx.lineTo(325, 110);
// Bottom connecting wire
ctx.moveTo(300, 110);
ctx.lineTo(300, 170);

// Middle horizontal wire (connecting bottoms of C1 and C2)
ctx.moveTo(150, 170);
ctx.lineTo(300, 170);

// --- Capacitor C3 ---
// Top connecting wire
ctx.moveTo(225, 170);
ctx.lineTo(225, 200);
// Plates
ctx.moveTo(200, 200);
ctx.lineTo(250, 200);
ctx.moveTo(200, 220);
ctx.lineTo(250, 220);
// Bottom connecting wire
ctx.moveTo(225, 220);
ctx.lineTo(225, 270);


// Terminal B wire
ctx.moveTo(70, 270);
ctx.lineTo(225, 270);

// Stroke all paths
ctx.stroke();

// --- Draw Terminals (circles) ---
// Terminal A
ctx.beginPath();
ctx.arc(50, 50, 4, 0, 2 * Math.PI);
ctx.stroke();
// Terminal B
ctx.beginPath();
ctx.arc(50, 270, 4, 0, 2 * Math.PI);
ctx.stroke();

// --- Draw Labels ---

// Terminal labels
ctx.font = "20px 'Times New Roman'";
ctx.fillText('A', 30, 55);
ctx.fillText('B', 30, 275);

// Capacitor labels
// C1
ctx.font = "italic 20px 'Times New Roman'";
ctx.fillText('C', 100, 105);
ctx.font = "14px 'Times New Roman'";
ctx.fillText('1', 113, 112);

// C2
ctx.font = "italic 20px 'Times New Roman'";
ctx.fillText('C', 220, 105);
ctx.font = "14px 'Times New Roman'";
ctx.fillText('2', 233, 112);

// C3
ctx.font = "italic 20px 'Times New Roman'";
ctx.fillText('C', 170, 215);
ctx.font = "14px 'Times New Roman'";
ctx.fillText('3', 183, 222);

// Bottom text label
ctx.font = "20px 'KaiTi', 'SimSun'"; // Common fonts for Chinese characters
ctx.fillText('习题 7-47 图', 150, 320);

</script>
</body>
</html>